<template>
  <div class="px-5 py-4">
    <div class="flex"><h2 class="text-lg font-bold">进店逛逛</h2></div>
    <div class="py-2">
      <div class="flex items-baseline justify-between max-xl:flex-col">
        <div class="flex flex-1 max-xl:w-full">
          <div class="border-1 flex items-center" style="width: 65px; height: 65px">
            <el-image
              src="http://img30.360buyimg.com/popshop/jfs/t1/231474/17/18819/2155/665048b9F7fbf6366/8a8e20df28a5325f.png"
            ></el-image>
          </div>
          <div class="ml-3">
            <h3 class="text-4 font-600">店铺名称</h3>
            <div class="pt-1 pb-2">
              <el-rate
                v-model="shopRate"
                disabled
                size="small"
                show-score
                text-color="#ff9900"
                style="
                  height: 1.5em;
                  display: inline-flex;
                  align-items: center;
                  line-height: 1.5em;
                "
              />
              <div class="ml-2 flex">
                <span
                  class="text-2.5 text-red-600 border-1 border-red-5 px-1 py-0.5 border-rounded-sm"
                  >9年老店</span
                >
              </div>
            </div>
          </div>
          <div class="flex text-3.25 flex-1 pr-3.5 items-center text-gray-400 max-xl:justify-end">
            <div class="ml-2">
              <span>商品评价<i class="text-red-5 ml-1">高</i></span>
            </div>
            <div class="ml-2">
              <span>商品评价<i class="text-red-5 ml-1">高</i></span>
            </div>
            <div class="ml-2">
              <span>商品评价<i class="text-red-5 ml-1">高</i></span>
            </div>
          </div>
        </div>
        <div class="flex items-center justify-center max-xl:w-full max-xl:mt-2">
          <el-button type="" :icon="ChatRound" class="w-1/2">进店逛逛</el-button
          ><el-button type="" :icon="Shop" class="w-1/2">进店逛逛</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { ChatRound, Shop } from "@element-plus/icons-vue";
const shopRate = ref(4.5);
</script>
<style scoped lang="scss">
:root {
  --el-rate-void-color: #ff0000;
}
:deep(.el-rate) {
  display: inline-flex;
  align-items: center;
  height: 32px;
}
</style>
